<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>试卷详情</title>
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        .question-list li {
            margin-bottom: 10px;
        }
        .title-header {
            font-weight: bold;
            color: #009688;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <h2 class="layui-text">试卷详情</h2>
    <blockquote class="layui-elem-quote" id="examInfo"></blockquote>
    <button class="layui-btn layui-btn-normal data-count-edit" id="startExam" onclick="toExamNow()">
        <i>答题开始</i>
    </button>

    <div class="layui-collapse" lay-accordion id="questionCollapse">
        <!-- 动态插入题目内容 -->

    </div>
</div>

<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    layui.use(['element', 'layer'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.jquery;

        // 获取 URL 参数
        function getQueryParam(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        const examCode = getQueryParam("examCode");
        
        // 将 examCode 设为全局变量，以便 toExamNow 函数可以访问
        window.globalExamCode = examCode;

        if (!examCode) {
            layer.msg("缺少考试编号参数！");
            return;
        }

        // 先根据examCode获取考试信息
        axios.get(`/exam/${examCode}`)
            .then(res => {
                if (res.status === 200 && res.data.code === 200) {
                    const exam = res.data.data;
                    // 渲染考试基本信息
                    $('#examInfo').html(`
                <p><strong>考试科目：</strong>${exam.source}</p>
                <p><strong>考试描述：</strong>${exam.description}</p>
                <p><strong>考试日期：</strong>${exam.examDate}</p>
                <p><strong>考试时长：</strong>${exam.totalTime} 分钟</p>
                <p><strong>总分：</strong>${exam.totalScore} 分</p>
                <p><strong>提示：</strong>${exam.tips || ''}</p>
            `);

                    // 拿到paperId后调用试卷接口
                    return axios.get(`/paper/${exam.paperId}`);
                } else {
                    layer.msg("考试信息加载失败: " + (res.data.message || "无返回数据"));
                    throw new Error("考试信息加载失败");
                }
            })
            .then(res => {
                if (res.status === 200 && res.data) {
                    const topic = res.data;
                    const typeMap = {
                        1: '选择题',
                        2: '填空题',
                        3: '判断题'
                    };

                    let html = '';
                    Object.keys(typeMap).forEach(type => {
                        const list = topic[type] || [];
                        html += `
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">${typeMap[type]}（共 ${list.length} 题）</h2>
                        <div class="layui-colla-content layui-show">
                            <ul class="question-list">
                                ${list.map((q, i) => `
                                    <li>
                                        ${i + 1}. ${q.question}
                                        <span style="color: #999">(${q.score}分)</span>
                                        <a href="#" style="color: red" onclick="deleteQuestion(${type}, ${q.questionId}); return false;">删除</a>
                                    </li>
                                `).join('')}
                            </ul>

                        </div>

                    </div>`;
                    });
                    $('#questionCollapse').html(html);
                    element.render('collapse');
                } else {
                    layer.msg("试卷题目加载失败: 无返回数据");
                }
            })
            .catch(err => {
                console.error(err);
                layer.msg("加载失败，服务器无响应或接口错误");
            });
    });
    function toExamNow(){
        if (!window.globalExamCode) {
            layui.layer.msg("考试编号获取失败！");
            return;
        }
        layui.layer.confirm('确定要开始考试吗？', {icon: 3, title:'提示'}, function(index){
            // 用户点击“确定”后执行跳转
            window.location.href = `examNow.html?examCode=${window.globalExamCode}`;
            layui.layer.close(index); // 关闭弹窗
        });
    }

</script>
</body>
</html>
